<template>
  <div class="boxpcmobilepc">
    <h2 class="mobilepc" style="text-align:center">pc</h2>
<div class="demo-image__preview">
  <div  class="palnlanguge" v-for='(item,index) of getplanlanguagepc' :key='item.id'>
  <h2>{{item.lan ==1?$t('recplan.chinesetwzh'):item.lan ==2?$t('recplan.chinesetw'):item.lan ==3?$t('recplan.english'):''}}</h2>
  <div>
  <el-image 
    style="width: 300px; height: 300px"
    :src="item.url" 
    :preview-src-list="familiarUrlpc[index]">
  </el-image>
  </div>
  <el-button  v-if="diction =='Counter'?false:true"
        type="primary"
        style="position: relative; overflow: hidden;margin-top:30px"
        >{{$t('recplan.upload')}}<i class="el-icon-upload el-icon--right"></i>
        <input
            type="file"
            style="
            position: absolute;
            top: 0;
            left: 0;
            height: 50px;
            opacity: 0;"
        @change="tirggerFile($event,item)"
        accept="image/*"/>
    </el-button>
</div>
</div>


<h2 class="mobilepc" style="text-align:center">mobile</h2>
<div class="demo-image__preview">
  <div  class="palnlanguge" v-for='(item,index) of getplanlanguagemobile' :key='item.id'>
  <h2>{{item.lan ==1?$t('recplan.chinesetwzh'):item.lan ==2?$t('recplan.chinesetw'):item.lan ==3?$t('recplan.english'):''}}</h2>
  <div>
  <el-image 
    style="width: 300px; height: 300px"
    :src="item.url" 
    :preview-src-list="familiarUrlmobile[index]">
  </el-image>
  </div>
  <el-button  v-if="diction =='Counter'?false:true"
        type="primary"
        style="position: relative; overflow: hidden;margin-top:30px"
        >{{$t('recplan.upload')}}<i class="el-icon-upload el-icon--right"></i>
        <input
            type="file"
            style="
            position: absolute;
            top: 0;
            left: 0;
            height: 50px;
            opacity: 0;"
        @change="tirggerFile($event,item)"
        accept="image/*"/>
    </el-button>
</div>
</div>
  </div>
</template>

<script>
import { 
  getNudataRequest,postUserRequest,
  getUserListMessageImg,} from '@/api/api'
import lrz from "lrz";

export default {
name:'recommend',

data(){
return{
diction:null,
familiarUrlpc:[],
getplanlanguagepc:[],

familiarUrlmobile:[],
getplanlanguagemobile:[],
}
},
methods:{
  upgetplan(item){
    postUserRequest(item,'/setRecPlan').then(res=>{
      let plandata = res.data
      if(plandata.code==200){
        this.getplanlanguagepc = []
        this.familiarUrlpc = []
        this.getplanlanguagemobile = []
        this.familiarUrlmobile = []
        plandata = plandata.data
        plandata.forEach((item)=>{
        if(item.platform == 'pc'){
            this.getplanlanguagepc.push(item)
            this.familiarUrlpc.push([item.url])
        }else if(item.platform == 'mobile'){
            this.getplanlanguagemobile.push(item)
            this.familiarUrlmobile.push([item.url])
        }
      })

      }else{
        this.$message({
					message: plandata.message,
					type: "error",
      });
      }
    })
  
  
  },
  getplan(){
  getNudataRequest('/getRecPlan').then(res=>{
      let data = res.data;
    if(data.code == 200){
      data = data.data
      data.forEach((item)=>{
        if(item.platform == 'pc'){
            this.getplanlanguagepc.push(item)
            this.familiarUrlpc.push([item.url])
        }else if(item.platform == 'mobile'){
            this.getplanlanguagemobile.push(item)
            this.familiarUrlmobile.push([item.url])
        }
      })
      
    }else{
	    this.$message({
					message: data.message,
					type: "error",
      });
    }
  })
  },

  tirggerFile(event,item) {
      let _this = this;
      var file = event.target.files[0];
      if (file.size / 1024 / 1024 > 5) {
        this.$message({
          message: this.$t('recplan.lessthan5m'),
          type: "error",
        });
        return;
      }
      if (file.type.indexOf("image") == -1) {
        this.$message({
          message: this.$t('recplan.Unsupported'),
          type: "error",
        });
        return;
      }
      //创建文件读取相关的变量
      var imgFile;
      var reader = new FileReader();
      //为文件读取成功设置事件
      reader.onload = function (e) {
        imgFile = e.target.result;
        var data = { bas64: imgFile };
        getUserListMessageImg(data, "/uploadBas64Image").then((res) => {
          if (res.data.code ==200) {
            item.url= res.data.data;
            _this.upgetplan(item)
          } else {
            this.$message({
              message: this.$t('recplan.Uploadfailed'),
              type: "error",
            });
          }
        });
      };
      lrz(file, {
        quality: 1, // 图片压缩质量，取值0-1，默认为0.7
        filedName: "", // 后端接收的字段名，默认为 'file'
      })
        .then((rst) => {
          //正式读取文件
          reader.readAsDataURL(rst.file);
        })
        .catch(function (err) {
          // 处理失败会执行
        })
        .always(function () {
          // 不管是成功失败，都会执行
        });
    },
},
mounted(){
    this.diction = sessionStorage.getItem("bospower");
    this.getplan()
}
}
</script>

<style scoped>

.demo-image__preview{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.palnlanguge{
    text-align: center;
}
.mobilepc{
  padding: 30px 0;
  font-size: 30px;
  
}
.boxpcmobilepc{
  padding-bottom: 50px;
}
</style>